<!--
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-05-28 21:41:30
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-05-29 08:31:04
 * @FilePath: \guanggu_traffic\src\views\normal\components\LayerReport\LayerReport.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<el-menu-item index="4" @click="handleClick">报告路况</el-menu-item>
    <ReportPopup v-model="dialogVisable" :position="position"></ReportPopup>
</template>

<script setup>
import {onMounted,getCurrentInstance,ref} from 'vue'
import{Query}from'@/api/mapgis-api/Query'
import *as turf from"@turf/turf"
import{createDraw} from'@/api/ol-api/createDraw'
import ReportPopup from './ReportPopup.vue'
const {proxy} = getCurrentInstance(); 
let map
//创建画笔图层
let source = new ol.source.Vector({});
let layer = new ol.layer.Vector({
    source
})
//文档对象
let service = {
    docName:import.meta.env.VITE_MAPGIS_DOC_NAME,
    layerId:1
}
let position = ref([]);
let draw = createDraw({
    type:'Point',
    source,
    success:(e)=>{
         position.value = e.getGeometry().getCoordinates();
        //请求道路数据
        Query.queryByLayerId(service).then((features)=>{
            //将服务返回的ol类型的(features)类型数据转换成Jeojson类型的
            let line =new ol.format.GeoJSON().writeFeaturesObject(features);
            //创建线缓冲区 ,第二个参数是缓冲区的半径(单位是公里),缓冲区得用geogson的格式
            const bufferedLine = turf.buffer(line,0.2);
            console.log("object",bufferedLine);
            //将bufferedLine 的 FeatureCollection,转为Feature,
            const bufferLineFeature = bufferedLine.features.map((item)=>{
                return{
                    type:"Feature",
                    geometry:item.geometry,
                    properties:item.properties,
                }
            }) 
            //遍历每一项Feature 比pistion 是否包含比较(即判断当前的点是否在缓冲区内);
            const point = turf.point(position.value);
            let isWithin = [];//保存判断结果数组
            bufferLineFeature.forEach((item)=>{
                const result = turf.booleanPointInPolygon(point,item);
                isWithin.push(result);
            })
            // console.log("object",isWithin);
            //遍历判断结果
           if( isWithin.some((item)=>item===true)){
            //显示弹窗
            dialogVisable.value = true;
           }else{
            dialogVisable.value = false;
           }
        })
        //结束画笔
        map.removeInteraction(draw)
    }
})
/*******
 * 1.只能点击道路图层
 * 使用mapgis获取到到光谷道路图层,然后使用turf判断道路图层是否包含当前的点,
 * 如果包含则实时显示路况弹窗, 如果不包含 则alert提示,请点击道路
 * 2.弹窗内容确定后,则传到服务器
 * **********************/
 onMounted(()=>{
    map = proxy.$map;
    map.addLayer(layer)
 })
 const dialogVisable = ref(false)
const handleClick = () => {
    //激活画笔
    map.addInteraction(draw)
}
</script>

<style lang="scss" scoped></style>
